<template>
  <div class="bill-container">
      <Title :title="title" @click-more="skipMore" />
      <section class="bill-list-container">
          <ul>
              <router-link tag="li" :to="'/detail/'+item.song_id" v-for="(item,index) in list" :key="index">
                  <img :src="item.pic_s500" alt="">
              <p>{{item.title}}</p>
              </router-link>
          </ul>
      </section>

  </div>
</template>

<script>
import Title from "./Title";
import {getBillList} from "@/api/baidu-music";
export default {
components:{
    Title,

},
props:{
    title:{
        type:String
    },
    type:{
        type:[String,Number]
    },
    size:{
        type:[String,Number]
    }
  
},
data(){
    return{
        list:[]
    }
},
created(){
    console.log(this.type+this.size);
    getBillList(this.type,this.size).then(res=>{
        console.log(res);
        this.list=res.data.song_list
        
    })
},
methods:{
    skipMore(){
        this.$router.push({
            name:"moreMusic",
            params:{
                title:this.title,
                type:this.type
            }
        })
    }
}
}
</script>

<style lang="less" scoped>

.bill-container{
    background: #fff;
    margin-bottom: 10px;
}
.bill-list-container{
    padding: 10px;
    ul{
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding-left: 0px;
        li{
            width: calc(100%/3);
            box-sizing: border-box;
            padding: 5px;
            img{
                width: 100%;
            }
        }
    }
}

</style>